<template>
  <div>
  <el-form
      :model="formData"
      inline
      style="display: flex;justify-content: flex-end;margin-top: 10px;"
    >
      <!-- <el-form-item prop="question">
        <el-input v-model="formData.question" placeholder="请输入问题"></el-input>
      </el-form-item> -->
      <el-form-item>
        <!-- <el-button @click="search" type="primary">查找</el-button> -->
        <el-button @click="openDialog('创建', 'add', null)" type="primary">添加</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading='tableLoading' 
    :data="tableData" border 
    row-key="id" 
     :tree-props="{children: 'children'}"
     >
     <el-table-column align="center" label="类目id" prop="id"></el-table-column>
     <el-table-column align="center" label="类目名" prop="name"></el-table-column>
     <el-table-column align="center" label="类目图标" prop="iconUrl"></el-table-column>
     <el-table-column align="center" label="类目图片" prop="picUrl"></el-table-column>
     <el-table-column align="center" label="关键字" prop="keywords"></el-table-column>
     <el-table-column align="center" label="简介" prop="desc"></el-table-column>
     <el-table-column align="center" label="级别" prop="level"></el-table-column>
     <el-table-column label="操作" width="200">
       <template slot-scope="scope">
         <el-button @click="openDialog('编辑','edit',scope.row)" type="primary">编辑</el-button>
          <el-button @click="deleteData(scope.row)" type="danger">删除</el-button>
       </template>
     </el-table-column>
    </el-table>
    
    <el-dialog :visible.sync='dialogVisible'
      :title="dialogTitle"
      width="500"
      >
      <el-form ref="dialogForm" :rules="formRules" :model="dialogFormData"
      label-width="100px">
      <el-form-item label="类目名称" prop="name">
        <el-input v-model="dialogFormData.name"></el-input>
      </el-form-item>

      <el-form-item label="关键字" prop="keywords">
        <el-input v-model="dialogFormData.keywords"></el-input>
      </el-form-item>
    
      <el-form-item label="级别" prop="level">
        <el-select v-model="dialogFormData.level">
          <el-option label="一级目录" value="L1"></el-option>
          <el-option label="二级目录" value="L2"></el-option>
        </el-select>
      </el-form-item>
 
     <el-form-item v-if="dialogFormData.level==='L2'" lable='父类目' prop="id">
       <el-select v-model="dialogFormData.pid">
         <el-option v-for="(item,index) in levelOptions" :key='index'
           :label="item.label"
           :value="item.value">
         </el-option>
       </el-select>
     </el-form-item>
 
    <el-form-item  label="类图标类" prop="iconUrl">
      <el-upload
      class="avatar-uploader"
      action="http://192.168.200.251:8888/admin/storage/create"
      
      :show-file-list="false"
      :on-success="iconUrlSuccess"
      :headers="{'shopping-admin-token':token}">
      <img v-if="dialogFormData.picUrl" :src='dialogFormData.picUrl' style="width:100px;">
      <i
      v-else
      class="el-icon-plus avatar-uploader-icon"
      style="width:100px;height:100px;border-radius:10px;border:2px dashed #ddd;line-height:100px;">
      </i>
      </el-upload>
    </el-form-item>
     <el-form-item label="类目简介" prop="desc">
       <el-input v-model="dialogFormData.desc"></el-input>
     </el-form-item>
      </el-form>
         <span slot="footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button @click="confirm" type="primary">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
  
<script>
import axios from 'axios'
export default {
  name: 'shopCategory',
  componentTitle: '商品类目',
  data () {
    return {
      token:sessionStorage.getItem('shopping-admin-token'),
      tableLoading:false,
      dialogVisible:false,
      dialogTitle:'创建',
      dialogType:'add',
      dialogFormData:{
        name:'',
        keywords:'',
        level:'L2',
        iconUrl:'',
        picUrl:'',
        desc:'',
        pid:''


      },
      formData:{
        question:""
      },
      tableData:[],
      formRules:{
        question: [
          {required: true, message: '请输入问题', trigger: 'change'}
        ],
        answer: [
          {required: true, message: '请输入回答', trigger: 'change'}
        ]
      },
      levelOptions:[]
    }
  },
  mounted(){
    this.search()
    this.getLevelOptions()
  },
  methods:{
 
    getLevelOptions(){
      axios({
        url:'http://192.168.200.251:8888/admin/category/l1',
        method:'get',
        headers:{
          'shopping-admin-token':sessionStorage.getItem('shopping-admin-token')

        }
      }).then(res=>{
        this.levelOptions=res.data.data.list
        console.log(res)
      })
    },
    
    openDialog(title,type,row){
      console.log(row)
      this.dialogVisible=true
      this.dialogType=type
       this.dialogTitle = title
    
     if (type === 'edit') {
        this.$nextTick(() => {
          this.dialogFormData = Object.assign({}, row)
        })
    }
  },
   confirm () {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          if (this.dialogType === 'add') {
            this.addData()
          } else if (this.dialogType === 'edit') {
            this.editData()
          }
        } else {
          return false
        }
      })
    },
    cancel () {
      this.$refs.dialogForm.resetFields()
      this.dialogVisible = false
    },
    // 上传图片成功的回调函数
    iconUrlSuccess(res,file){
      console.log(res)
      this.dialogFormData.iconUrl=res.data.url.replace(/localhost:8888/g,'192.168.200.251:8888')
      console.log(this.dialogFormData)
    },
    picUrlSuccess(res,file){
      this.dialogFormData.picUrl=res.data.url.replace(/localhost:8888/g,'192.168.200.251:8888')
    },
    
    // 添加接口
    addData () {
      axios({
        url: 'http://192.168.200.251:8888/admin/category/create',
        method: 'post',
        data: {
          ...this.dialogFormData,
          pid: String(this.dialogFormData.level) === '1' ? 0 : this.dialogFormData.pid
        },
        headers: {
          'shopping-admin-token': sessionStorage.getItem('shopping-admin-token')
        }
      }).then(res => {
        if (res.data.errno === 0) {
          this.cancel()
          this.$notify.success({title: '添加成功'})

          this.search()
        } else {
          this.$notify.error({title: '添加失败'})
        }
      })
    },
    // 编辑接口
    editData () {
      axios({
        url: 'http://192.168.200.251:8888/admin/category/update',
        method: 'post',
        data: {
          ...this.dialogFormData
        },
        headers: {
          'shopping-admin-token': sessionStorage.getItem('shopping-admin-token')
        }
      }).then(res => {
        if (res.data.errno === 0) {
          this.cancel()
          this.$notify.success({title: '编辑成功'})

          this.search()
        } else {
          this.$notify.error({title: '编辑失败'})
        }
      })
    },
    deleteData (row) {
      this.$confirm('此操作将删除该问题, 是否继续?').then(() => {
        axios({
          url: 'http://192.168.200.251:8888/admin/category/delete',
          method: 'post',
          data: row,
          headers: {
            'shopping-admin-token': sessionStorage.getItem('shopping-admin-token')
          }
        }).then(res => {
          this.$notify.success({title: '删除成功'})
  
          this.search()
        })
      })
    },
    search () {
      this.tableLoading = true

      axios({
        url: 'http://192.168.200.251:8888/admin/category/list',
        method: 'get',
        
        headers: {
          'shopping-admin-token': sessionStorage.getItem('shopping-admin-token')
        }
      }).then(res => {
        this.tableLoading = false
        this.tableData = res.data.data.list

 
      })
    },
  }
}
</script>



